.header {
	&-mobile {
		width: 100%;
		top: 0;
		left: 0;
		position: fixed;
		height: $header-inner-height;
		background-color: $default-background-color;
		display: none;
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
		z-index: 11;
		@media screen and (max-width: $responsive-md) {
			display: block;
		}

		&_img {
			position: absolute;
			top: 5px;
			left: 5%;
			
			>img {
				width: 30px;
				height: 30px;
			}
		}
		&_title {
			height: $header-inner-height;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		&_search {
			position: absolute;
			top: 13%;
			right: 15%;
			width: 30px;
			height: 30px;
		}
		&_avatar {
			position: absolute;
			top: 15%;
			right: 5%;
			width: 30px;
			height: 30px;
			&:hover {
				border: 1px solid $default-info-hover-color;
			}
		}
	}
	&-web {
		width: 100%;
		height: 60px;
		top: 0;
		left: 0;
		position: fixed;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
		background-color: $default-background-color;
		padding: $heading-padding-vertical 60px;
		z-index: 11;
		@media screen and (max-width: $responsive-md) {
			display: none;
		}
		@media screen and (max-width: 1590px) {
			background-color: rgba(255, 255, 255, 0.9);
		}

		&_left {
			height: $header-inner-height;
			float: left;
			display: inline-flex;
			align-items: center;
			@media screen and (max-width: $responsive-md) {
				display: none;
			}

			&-img {
				width: $header-inner-height;
				height: $header-inner-height;
				margin-right: 6px;
			}
			&-title {
				color: $color-gradually-gray-31;
				font-size: 24px;
				font-weight: 500;
				font-family: $logo-font;
				margin-right: 2px;
			}
			&-motto {
				color: $color-main-primary;
				font-size: 12px;
				margin-top: 8px;
			}
		}

		&_right {
			float: right;
			height: $header-inner-height;
			display: inline-flex;
			align-items: center;
			> li {
				display: inline-block;
				margin: 0 px2rem(2px);
				cursor: pointer;
				> a {
					padding-bottom: 3px;
					font-size: 17px;
					margin-left: 20px;
					@media screen and (max-width: $responsive-md) {
						padding-bottom: 1px;
					}
					
					&:hover, &.current {
						color: $default-info-hover-color;
					}
				}
			}
			&-search {
				margin-right: 20px;
			}
			&-avatar {
				margin-left: 10px;
				border: 1px solid $default-info-hover-color;
			}
		}
	}
}
